<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        display: flex;
        height: 200px;
        width:600px;
        background-color: turquoise;
        margin:50px auto;
    }
    .item1{
        flex:1 1 2%;
        background-color:#0f0;
    }
    .item2{
        flex:1 1 200px;
        background-color:#f00;
    }
    .item3{
        flex:1 1 auto;
        background-color:#ff0;
    }
</style>
<body>
    <div>
        flex布局中：
        flex的属性值有三个：flex-grow, flex-shrink 与 flex-basis。
        flex-grow：设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）
        flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
        flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用  box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
    </div>
    <div>
        flex-grow: 取值，默认为0，用于决定项目再剩余空间的情况下是否放大，默认不放大；
        注意：即便是设置了固定宽度，也会放大
        假设默认三个项目中前两个项目都为0，最后是一个1，最后的项目会占满所有空间；
    </div>
    <div>
        flex-shink: 取值：默认为1，用于决定项目空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；
        注意：即便设置了固定宽度，也会缩小。但如果某个项目flex-shirnk设置为0，则即便空间不够，自身也不缩小。
    </div>
    <div>
        flex-basis: 取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，
        但如果设置了flex-basis，权重会比width属性高，因此会覆盖width的属性；
    </div>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
    <div>
        计算宽度：
        当主轴空间有剩余，求最终left、right宽度
        <div>
            计算规则：
            剩余空间：600-（300+200）= 100px
            flex-grow值分别为1和2，总共3等分，left: 1/3，right: 2/3
            最终的值：（flex-basis + 剩余 * flex-grow占比）
            left：300+100 * 1/3 = 333.33px
            right：200+100* 2/3 = 266.67px
        </div>
    </div>
    <div>
        当主轴空间不足，求最终left、right宽度
        <div>
            计算规则：
            flex-shrink的值分别为2和1
            溢出空间：（500+400）- 600 = 300px
            总权重： 2 * 500 + 1 * 400 = 1400
            缩小的空间值：（溢出 * flex-shrink * 权重占比）
            left： 300 * 2 * 500/1400 = 214.28px
            right：300 * 1 * 400/1400 = 85.72px
            最终的值：
            left：500 - 214.28 = 285.72
            right：400 - 85.72 = 314.28
        </div>
    </div>
</body>
</html>